import React from 'react';
import { Layer, Stage, Rect, Image, Text, Line } from 'react-konva';
const Calendar3 = ({ img, date, text }: any) => {
  const color = '#f4c086'
  const color2 = '#b67127'
  return (<Stage width={500} height={800}>
    <Layer >
      <Rect fill={color} x={0} y={0} width={500} height={800} />
      {/* <Text
        text={date.locale('zh-cn').format('dddd')+' '+date.locale('en-us').format('dddd')}
        x={320}
       fontSize={20}
        y={30}
        fill={color2}
      /> */}
      <Line points={[30, 30, 470, 30]} stroke={color2} strokeWidth={1} />
      {/* 
      
      <Text x={60} fontWeight="bold" y={70} text='早安' fill={color2} fontSize={30} />
      <Text x={125} y={80} text='记录美好' fill={color2} fontSize={12} />
      <Text x={80} fontWeight="bold" y={110} text='你好' fill={color2} fontSize={50} /> */}

      <Rect
        fill='#fff'
        x={30}
        y={50}
        width={440}
        height={728}
      />
      <Image x={50} y={70} width={400} height={480} image={img} />

      <Text text='早安•生活' letterSpacing={4} x={50} y={580} fill={color2} fontSize={40} />
      <Text x={50} y={630} letterSpacing={2} text='GOOD MORNING，LIFE' fill={color2} fontSize={20} />
      <Line points={[50, 675,450, 675]} stroke={color2} strokeWidth={1} />

      <Text y={690} lineHeight={1.5} fontStyle="bold" x={100} fontSize={15} fill={color2} text={text} />

      <Rect
        width={80}
        height={100}
        x={364}
        y={560}
        strokeWidth={1}
        stroke={color2}
      />
      <Rect
        width={80}
        height={100}
        x={360}
        y={566}
        fill={'#fff'}
        strokeWidth={1}
        stroke={color2}
      />
      <Text
        text={`${date.format('MM')}/${date.format('DD')}`}
        x={374}
        fontSize={20}
        y={580}
        fill={color2}
      />
      <Text
        text={date.format('YYYY')}
        x={374}
        fontSize={20}
        y={605}
        fill={color2}
      />
      <Text
        text={date.locale('zh-cn').format('dddd')}
        x={374}
        fontSize={20}
        y={630}
        fill={color2}
      />
      {/* <Rect
        x={300}
        y={500}
      /> */}
     


      <Text
        text='「'
        fontSize={25}
        y={690}
        x={40}
        fill={color2}
      />
      <Text
        text='」'
        fontSize={25}
        y={740}
        x={440}
        fill={color2}
      />
    </Layer>
  </Stage>)
}
export default Calendar3